<template>
  <content-field>
    <n-card :segmented="{ content: 'soft' }">
      <template #header>
        <n-h1 prefix="bar" style="margin-bottom: 0px">
          <n-text> {{ article.title }} </n-text>
        </n-h1>

        <n-space>
          <n-tag :bordered="false" size="small"
            >作者:{{ article.author_nickname }}
          </n-tag>
          <n-tag :bordered="false" v-if="article.collection" size="small"
            >收集于: {{ article.collection.name }}</n-tag
          >
          <n-tag :bordered="false" size="small"
            >创建时间:<n-time :time="article.create_time"
          /></n-tag>
        </n-space>
        <n-blockquote class="brief">
          {{ article.brief }}
        </n-blockquote>
      </template>
      <template #header-extra v-if="$store.state.user.is_staff">
        <n-space vertical
          ><n-tag :type="article.is_active ? 'success' : 'default'">
            {{ article.is_active ? "√ 广播中" : "一 未广播" }}
          </n-tag>
          <n-button type="primary" dashed @click="to_article_edit(article.id)"
            >编辑 &nbsp; <n-text depth="3"> #{{ article.id }}</n-text></n-button
          >
        </n-space>
      </template>
      <template #default>
        <v-md-preview :text="article.content" />
      </template>
    </n-card>
  </content-field>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { shallowRef } from "@vue/reactivity";
import routerJump from "@/composables/RouterJump";
import remoteData from "@/composables/RemoteData";

export default {
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  components: { ContentField },

  setup(props) {
    const { to_article_edit, go_404 } = routerJump();
    const { get_article_details } = remoteData();
    let article = shallowRef({
      id: null,
      collection: {
        name: "",
        id: "",
      },
    }); // 浅层ref

    get_article_details(article, props.id).catch(() => {
      go_404();
    });
    return {
      article,
      to_article_edit,
      get_article_details,
    };
  },
};
</script>

<style scoped>
.font {
  /* font-family: 'Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif  '; */
}
.brief {
  font-family: 'Ubuntu, Roboto, "Open Sans", "Microsoft YaHei", sans-serif  ';
}
</style>